<!--河长牌管理页面-->
<style lang="less">
</style>

<template>
  <div class="river">
    <Card :bordered="false">
      <p slot="title" class="white">
        河湖管理 > <span class="select-font">河长牌管理</span>
      </p>
      <div>
        <Button type="error" @click.native="del1" style="margin-right: 15px"
          >删除河长牌</Button
        >
        <Form :model="searchItem" class="smallForm">
          <Input
            v-model="searchItem.name"
            :maxlength="30"
            style="width: 200px"
            placeholder="请输入河流名称"
          ></Input>
          <Input
            v-model="searchItem.board_no"
            :maxlength="30"
            style="width: 200px; margin-left: 15px"
            placeholder="请输入河长牌编号"
          ></Input>
        </Form>
        <Button type="info" style="margin-left: 15px" @click="getData('1')"
          >搜索</Button
        >
      </div>
    </Card>
    <div>
      <Table
        :data="boardData"
        @on-selection-change="showSelect"
        :columns="boardColumns"
        stripe
      ></Table>
      <Page
        class="pull-right"
        :total="Page.total"
        :current="Page.current"
        :page-size="Page.pageSize"
        size="small"
        show-total
        @on-change="changePage"
      ></Page>
    </div>
    <Modal
      v-model="modal1"
      class="spe-modal"
      :mask-closable="false"
      title="查看河长牌图片"
      width="1000"
    >
      <img :src="imgSrc" alt="" style="width: 100%; height: 750px" />
    </Modal>
    <del-modal
      title="河长牌"
      ref="delModal"
      @del="del"
      :delArr="selectData"
      :url="urlBoardDel"
    ></del-modal>
    <Modal
      v-model="editModal"
      @on-ok="changeBoard"
      :mask-closable="false"
      title="编辑河长牌"
      width="600"
    >
      <Form :model="boardItem" :label-width="80">
        <Form-item label="河涌名" prop="river_name">
          <Input
            v-model="boardItem.river_name"
            :maxlength="15"
            placeholder="请输入河涌名"
          ></Input>
        </Form-item>
        <Form-item label="公示牌编号" prop="board_no">
          <Input
            v-model="boardItem.board_no"
            readonly
            placeholder="请输入公示牌编号"
          ></Input>
        </Form-item>
        <Form-item label="地址" prop="address">
          <Input
            v-model="boardItem.address"
            :maxlength="15"
            placeholder="请输入地址"
          ></Input>
        </Form-item>
        <Form-item label="所属区" prop="area">
          <Input
            v-model="boardItem.area"
            :maxlength="15"
            placeholder="请输入所属区"
          ></Input>
        </Form-item>
        <Form-item label="所属镇" prop="town">
          <Input
            v-model="boardItem.town"
            :maxlength="15"
            placeholder="请输入所属镇"
          ></Input>
        </Form-item>
        <Form-item label="所属河长办" prop="dep_name">
          <Input
            v-model="boardItem.dep_name"
            :maxlength="15"
            placeholder="请输入所属河长办"
          ></Input>
        </Form-item>
        <Form-item label="河长牌图片" prop="photos">
          <div
            class="demo-upload-list"
            v-for="(item, index) in photoList"
            :key="index"
          >
            <template>
              <img :src="domain2 + item" />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-trash-outline"
                  @click.native="removePhoto(index)"
                />
              </div>
            </template>
          </div>
          <Upload
            ref="JPhoto"
            :show-upload-list="false"
            :on-success="uploadPhoto"
            :format="['jpg', 'jpeg', 'png']"
            :max-size="20480"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            multiple
            type="drag"
            :action="uploadUrl"
            style="display: inline-block; width: 58px"
          >
            <div style="width: 58px; height: 58px; line-height: 58px">
              <Icon type="ios-camera" size="20" />
            </div>
          </Upload>
        </Form-item>
      </Form>
    </Modal>
    <Modal v-model="mapModal" width="800">
      <p slot="header" style="color: #f60; text-align: center">
        查看河长牌地理位置
      </p>
      <div id="map" style="height: 400px"></div>
    </Modal>
    <pictures ref="pictures"></pictures>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import { domain, domain2 } from 'global/setting';
import storage from 'good-storage';
import delModal from 'components/public/delModal';
import picture from 'public/picture';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  components: {
    'del-modal': delModal,
    pictures: picture,
  },
  data () {
    return {
      domain2,
      urlBoardList: '/bis/board/list',
      urlBoardDel: '/bis/board/del',
      urlBoardEdit: '/bis/board/edit',
      utlTownList: '/law/city/list',
      uploadUrl: `${domain}/filemanage/uploadphoto?dir=data/board/${new Date().format(
        'yyyy-MM-dd'
      )}&token=${storage.session.get('token')}`,
      searchItem: {
        name: '',
        area: '',
        board_no: '',
        town: '',
      },
      mapModal: false,
      boardData: [],
      boardColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '河涌名',
          key: 'river_name',
        },
        {
          title: '河涌编号',
          key: 'river_no',
        },
        {
          title: '公示牌编号',
          key: 'board_no',
        },
        {
          title: '地址',
          key: 'address',
        },
        {
          title: '上传用户',
          key: 'realname',
        },
        {
          title: '上传时间',
          render: (h, params) => {
            let time = params.row.date_time.substr(0, 10);
            return h('div', time);
          },
        },
        {
          title: '所属区',
          key: 'area',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属区',
                data: [
                  { name: '全部', value: 'all' },
                  { name: '禅城区', value: '禅城区' },
                  { name: '顺德区', value: '顺德区' },
                  { name: '南海区', value: '南海区' },
                  { name: '三水区', value: '三水区' },
                  { name: '高明区', value: '高明区' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.area = data;
                    this.searchItem.town = '';
                    this.getData();
                  } else {
                    this.searchItem.area = '';
                    this.getData();
                  }
                },
              },
            });
          },
        },
        {
          title: '所属镇',
          key: 'town',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属镇',
                data: this.townList,
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.town = data;
                    this.getData();
                  } else {
                    this.searchItem.town = '';
                    this.getData();
                  }
                },
              },
            });
          },
        },
        {
          title: '所属河长办',
          key: 'dep_name',
        },
        {
          title: '图片',
          render: (h, params) => {
            if (params.row.photo_list.length > 0) {
              let html = [];
              for (let i = 0; i < params.row.photo_list.length; i++) {
                html.push(
                  h('img', {
                    attrs: {
                      src: domain2 + params.row.photo_list[i],
                    },
                    style: {
                      width: '50px',
                      height: '50px',
                    },
                    on: {
                      click: () => {
                        this.$refs.pictures.showImg(params.row.photo_list, i);
                      },
                    },
                  })
                );
              }
              return h('div', html);
            } else {
              return null;
            }
          },
        },
        {
          title: '操作',
          minWidth: 180,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.showMap(params.row);
                    },
                  },
                },
                '显示地理位置'
              ),
            ]);
          },
        },
      ],
      Page: {
        current: 1,
        pageSize: 14,
        total: 0,
      },
      selectData: [],
      actionPage: '1',
      modal1: false,
      imgSrc: '',
      modal2: false,
      boardItem: {},
      editModal: false,
      townList: [],
      photoList: [] // 河长牌图片
    };
  },
  methods: {
    getData (page = 1) {
      let myBasis = storage.session.get('isWork') ? 5 : 2;
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {},
          order: { _id: -1 },
          basis: myBasis,
        },
        url: this.urlBoardList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.boardData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.searchItem.name !== '') {
        params.data.searchValue.river_name = `${this.searchItem.name}|#|like`;
      }
      if (this.searchItem.area !== '') {
        params.data.searchValue.area = this.searchItem.area;
      }
      if (this.searchItem.town !== '') {
        params.data.searchValue.town = this.searchItem.town;
      }
      if (this.searchItem.board_no !== '') {
        params.data.searchValue.board_no = `${this.searchItem.board_no}|#|like`;
      }
      ajaxPost(params);
    },
    showSelect (data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    changePage (page) {
      this.getData(page);
      this.actionPage = page;
    },
    del1 () {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择河长牌');
      }
    },
    del () {
      this.selectData = [];
      this.getData(this.actionPage);
    },
    edit (row) {
      this.editModal = true;
      this.boardItem.river_name = row.river_name;
      this.boardItem.board_no = row.board_no;
      this.boardItem.address = row.address;
      this.boardItem.area = row.area;
      this.boardItem.town = row.town;
      this.boardItem.dep_name = row.dep_name;
      this.boardItem._id = row._id;
      this.photoList = [...row.photo_list];
    },
    changeBoard () {
      let dataParam = {
        ...this.boardItem,
        photo_list: this.photoList
      }
      let params = {
        data: dataParam,
        url: this.urlBoardEdit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code === '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '修改成功',
            });
            this.getData(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    showMap (row) {
      this.mapModal = true;
      let center = new qq.maps.LatLng(row.lat, row.lng);
      let center2 = new qq.maps.LatLng(row.con_lat, row.con_lng);
      let map = new qq.maps.Map(document.getElementById('map'), {
        center,
        zoom: 16,
        disableDoubleClickZoom: false,
      });
      let marker = new qq.maps.Marker({
        position: center,
        map,
      });
      let anchor = new qq.maps.Point(0, 39),
        size = new qq.maps.Size(42, 68),
        origin = new qq.maps.Point(0, 0),
        markerIcon = new qq.maps.MarkerImage(
          '/static/img/gis1.png',
          size,
          origin,
          anchor
        );
      marker.setIcon(markerIcon);
    },
    getTown () {
      let params = {
        data: {
          searchValue: { level: '3' },
          basis: 2,
        },
        url: this.utlTownList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.townList = [{ name: '全部', value: 'all' }];
          res.data.result.result.map(item => {
            this.townList.push({ name: item.name, value: item.name });
          });
        },
      };
      if (this.searchItem.area !== '') {
        params.data.searchValue.level2 = this.searchItem.area;
      }
      ajaxPost(params);
    },
    uploadPhoto ({ result }) {
      let { path } = result;
      if (this.photoList.length > 0 && this.photoList.indexOf(path) !== -1) {
        this.$Message.warning('不能上传两个相同的图片，请重新上传');
        this.$refs.JPhoto.fileList.splice(-1, 1);
      } else {
        this.photoList.push(path);
      }
      let len = this.photoList.length;
      if (len > 7) {
        this.$Notice.warning({
          title: '最多只能上传 7 张图片。',
        });
        this.photoList.splice(7, len - 7);
      }
    },

    removePhoto (index) {
      this.$refs.JPhoto.fileList.splice(index, 1);
      this.photoList.splice(index, 1);
    },

    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传 jpg、jpeg 或 png 格式的图片。`,
      });
    },

    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 20M。`,
      });
    },

    handleBeforeUpload () {
      const check = this.photoList.length < 7;
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 7 张图片。',
        });
      }
      return check;
    },
  },
  mounted () {
    this.getData();
    this.getTown();
  },
  watch: {
    'searchItem.area' () {
      this.getTown();
    },
  },
};
</script>
